<template>
	<view class="mine-cell">
		<view class="mine-cell-top-view">
			{{title}}
		</view>
		<view class="mine-cell-bottom-view">
			<view class="mine-cell-bottom-left-view">
				<view
					:class="title == '我的待办' ? 'mine-cell-bottom-left-top-color-view' : 'mine-cell-bottom-left-top-view'">
					<view class="mine-cell-left-detail-view" v-if="title == '我的关注'">
						<view class="mine-cell-left-detail-image-view">
							<u-image width="100%" height="100%" src="/static/img/property/house.png" mode="aspectFit">
							</u-image>
							<u-badge type="error" :count="leftNumber" :offset="[-15, -15]"></u-badge>
						</view>
					</view>
					<view v-else>
						{{leftNumber}}
					</view>
				</view>
				<view class="mine-cell-bottom-left-bottom-view">
					{{leftLabel}}
				</view>
			</view>
			<view class="mine-cell-bottom-right-view">
				<view
					:class="title == '我的待办' ? 'mine-cell-bottom-right-top-color-view' : 'mine-cell-bottom-right-top-view'">
					<view class="mine-cell-right-detail-view" v-if="title == '我的关注'">
						<view class="mine-cell-right-detail-image-view">
							<u-image width="100%" height="100%" src="/static/img/property/land.png" mode="aspectFit">
							</u-image>
							<u-badge type="error" :count="rightNumber" :offset="[-15, -15]"></u-badge>
						</view>
					</view>
					<view v-else>
						{{rightNumber}}
					</view>
				</view>
				<view class="mine-cell-bottom-right-bottom-view">
					{{rightLabel}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			leftLabel: {
				type: String,
				default: ''
			},
			rightLabel: {
				type: String,
				default: ''
			},
			leftNumber: {
				type: Number,
				default: 0
			},
			rightNumber: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="scss">
	.mine-cell {
		flex-grow: 1;
		height: 300rpx;
		margin-top: 30rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;

		.mine-cell-top-view {
			height: 33%;
			font-weight: bold;
			font-size: 29rpx;
			align-items: center;
			display: flex;
			padding: 0rpx 25rpx;
		}

		.mine-cell-bottom-view {
			flex-grow: 1;
			display: flex;

			.mine-cell-bottom-left-view {
				width: 50%;
				display: flex;
				flex-direction: column;

				.mine-cell-bottom-left-top-color-view {
					height: 66%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #FF6851;
				}

				.mine-cell-bottom-left-top-view {
					height: 66%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 32rpx;
				}

				.mine-cell-bottom-left-bottom-view {
					flex-grow: 1;
					font-size: 25rpx;
					color: #666666;
					display: flex;
					justify-content: center;
				}

				.mine-cell-left-detail-view {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.mine-cell-left-detail-image-view {
						height: 70rpx;
						width: 70rpx;
						position: relative;
					}
				}
			}

			.mine-cell-bottom-right-view {
				width: 50%;
				display: flex;
				flex-direction: column;

				.mine-cell-bottom-right-top-color-view {
					height: 66%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 32rpx;
					color: #0672BF;
				}

				.mine-cell-bottom-right-top-view {
					height: 66%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 32rpx;
				}

				.mine-cell-bottom-right-bottom-view {
					flex-grow: 1;
					font-size: 25rpx;
					color: #666666;
					display: flex;
					justify-content: center;
				}

				.mine-cell-right-detail-view {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.mine-cell-right-detail-image-view {
						height: 70rpx;
						width: 70rpx;
						position: relative;
					}
				}
			}
		}
	}
</style>
